import React, {} from 'react';
import {
  StyleSheet,
  View,
  ScrollView,
  TouchableOpacity,
  Image,
  Text,
} from 'react-native';

import SizeUtils from '../../common/SizeUtils';
import ImageConstants from '../../common/ImageConstants';
import JumpToPageByUrlAction from '../../actions/common/JumpToPageByUrlAction';
import CommonRequestSliderImagesAction from '../../actions/common/CommonRequestSliderImagesAction';
import TImage from '../../components/TImage';

import BaseComponent from './BaseComponent';

var IMAGE_WIDTH = 480;
var IMAGE_HEIGHT = 280;
const MIN_COUNT = 2;

export default class CommonViewPager extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {
      bannerImages: [{image_url:ImageConstants.common_default_ad, isDefault:true},
        {image_url:ImageConstants.common_default_ad, isDefault:true}],
      data: [],
    }

    this._imageWidth = IMAGE_WIDTH;
    this._imageHeight = IMAGE_HEIGHT;
    console.log("this._imageWidth", this._imageWidth);
    console.log("this._imageHeight", this._imageHeight);
  }

  componentWillUpdate(nextProps, nextState) {
    if(this.state.data != nextState.data) {
      var images = Array.from(nextState.data);
      while (images.length < MIN_COUNT) {
        images.push({image_url:ImageConstants.common_default_ad, isDefault:true});
      }
      this.setState({
        bannerImages:images,
      })
    }
  }

  componentDidMount() {
    this.initTimer = setTimeout(
      () => {
        // this._requestData();
      },
      500
    );
  }

  render() {
    return (
      <View style={{width:SizeUtils.getWindowSize().width,
          // marginLeft:SizeUtils.translateDesignWidthToCode(40),
          height:SizeUtils.translateDesignHeightToCode(this._imageHeight)}}>
        <ScrollView style={{}}
            horizontal={true}   // 水平方向
            showsHorizontalScrollIndicator={false}  // 隐藏水平指示器
            showsVerticalScrollIndicator={false}    // 隐藏垂直指示器
            pagingEnabled={false}    // 开启分页功能
          >
            {this._renderItems()}
        </ScrollView>
      </View>)
  }

  doRefresh() {
    this._requestData();
  }

  _requestData() {
    new CommonRequestSliderImagesAction().call(this, {tag:this.props.type});
  }

  _renderItems() {
    return this.state.bannerImages.map((data, index) => {
      return this._renderPage(data, index);
    })
  }

  //轮播图片
  _renderPage(data, index) {
    var imageWidth = this._imageWidth;
    var imageHeight = this._imageHeight;
    var source = null;
    if(data.isDefault) {
      // source = "";
      source = data.image_url;
      imageWidth = 64;
      imageHeight = 55;
    }
    else {
      source = {uri: data.image_url};
    }
    var marginLeft = 20;
    var viewWidth = SizeUtils.translateDesignWidthToCode(this._imageWidth + 20);
    if(index == 0) {
      marginLeft = 40;
      viewWidth = SizeUtils.translateDesignWidthToCode(this._imageWidth + 40);
    }
    else if(index == this.state.bannerImages.length - 1){
      viewWidth = SizeUtils.translateDesignWidthToCode(this._imageWidth + 60);
    }
    return (
      <View key={index} style = {{height:SizeUtils.translateDesignWidthToCode(this._imageHeight),
          width:viewWidth,
          backgroundColor:"#00000000",}}>
        <View style={{width:SizeUtils.translateDesignWidthToCode(this._imageWidth),
            height:SizeUtils.translateDesignWidthToCode(this._imageHeight),
            marginLeft:SizeUtils.translateDesignWidthToCode(marginLeft),
            backgroundColor:"#eff1ff", justifyContent:"center", alignItems:"center"}}>
          <TouchableOpacity onPress = {() => {this._onPressImage(data)}}>
            <TImage
              source = {source}
              style = {{height:imageHeight, width:imageWidth}}
              isMini = {true}
              miniSize = {"mini300_q100"}
            />
          </TouchableOpacity>
        </View>
      </View>
    )
  }

  _onPressImage(data) {
    new JumpToPageByUrlAction().call(this, data);
  }
}

const styles = StyleSheet.create({

});
